import './index.less'
import {Avatar} from "antd";

const MessageForm = (props) => {
    const avatarStr = props.username.substring(0, 1)

    return (
        <div className="px-8 py-2 flex">
            <Avatar className="!mr-3" shape="square" size="large">{avatarStr}</Avatar>
            <div>
                <div className="text-xs text-neutral-500">
                    {props.username}
                </div>
                <div className="max-w-20rem">
                    <div className="relative bg-white p-3 rounded mt-1">
                        <div className="w-12px h-12px bg-white rotate-45 absolute -left-6px top-16px"></div>
                        {props.message}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default MessageForm